<template>
  <div class="myneeds">
    <div class="square_header flex align_center">
      <div
        class="square_header_item"
        :class="active == index ? 'underline ' : ''"
        v-for="(item,index) in activity"
        style="width:120px;"
        :key="index"
        @click="checkItem(index)"
      >
        <span
          :class="active == index ? 'title1 color1 zIndex fontBold ' : 'default'"
        >{{ item.name }}</span>
      </div>
    </div>
    <div
      class="content_box"
      v-if="listData.length > 0"
    >
      <van-pull-refresh
        disabled
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="loadMore"
          :immediate-check="false"
        >
          <div
            v-for="(demand, index) in listData"
            :key="index"
          >
            <p
              class="tips color1 font400 content3 flex align_center"
            >
              <span />
              <i v-if="active == 0 ">{{ demand.docking_time }}发布了一个需求</i>
              <i v-if="active == 1">{{ demand.docking_time }}对接了一个需求</i>
            </p>
            <div
              class="new_demand"
              @click="infodetail(demand.id)"
            >
              <div class="new_demand_item">
                <div class="new_demand_itemMr">
                  <p class="content1 fontBold color1 van-multi-ellipsis--l2">
                    <span
                      class="you"
                      v-show="demand.is_quality"
                    >优</span>
                    <van-tag
                      style="height:18px;width:42px;justify-content: center;"
                      class="tagleft"
                      color="#FF7A1F"
                      type="primary"
                    >
                      {{ demand.type }}
                    </van-tag>
                    {{ demand.title }}
                  </p>
                </div>
                <div class="new_demand_itemMr">
                  <span
                    class="font400 content2 color3 van-multi-ellipsis--l3"
                    style="line-height: 1.5;"
                    v-html="demand.desc"
                  />
                </div>
                <div class="new_demand_itemMr">
                  <div class="new_demand_img">
                    <van-image
                      v-for="(img, g) in demand.morepic"
                      :key="g"
                      width="70"
                      height="70"
                      fit="cover"
                      style="margin-right: 10px"
                      :src="img"
                    />
                  </div>
                </div>
                <div class="font400 content2 color6">
                  <span class="conut_num">
                    {{
                      demand.create_time
                    }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <NoData v-else />
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="flex align_center">
        <div
          @click="back"
          class="agree font400 content3 color4"
        >
          返回
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { getmydemand } from '@/api/index'
const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const router = useRouter()
const route = useRoute()
const store = useStore()
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const listData: any = ref([])
const active: any = ref(route.query.type || 0)
const form: any = ref({
  page: 1,
  pageSize: 10
})
const activity: any = ref([
  {
    name: '我发布的'
  },
  {
    name: '我对接的'
  }
])

const selectedDemandTypeId = computed(() => {
  return Number(route.query.type) || 0
})

watch(selectedDemandTypeId, (newVal, oldVal) => {
  onRefresh()
})

const checkItem = (index: any) => {
  router.replace({
    path: '/userCenter/needs',
    query: { type: index }
  })
  active.value = index
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const onRefresh = async () => {
  form.value.page = 1
  const list:any = await loadDemandList()
  listData.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list:any = await loadDemandList()
  listData.value = [...listData.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res:any =
    (await getmydemand({ ...form.value, get_type: Number(active.value) + 1 })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys:any = Object.keys(res.list)
    const newRes:any = keys.map((k:any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

const infodetail = async (id:any) => {
  router.push({ path: '/demand/details', query: { id: id } })
}

</script>

<style lang="less" scoped>
.myneeds {
    padding: 0 15px 80px;
    margin-top: 40px;
}
.square_header {
  .square_header_item {
    margin-right: 29px;
    text-align: center;
    .default {
      font-size: 19px;
      font-weight: bold;
      color: #454757;
    }
  }
}
.content_box {
  margin-top: 30px;
  .tips{
      margin-bottom:10px;
      span{
          display: inline-block;
          width: 7px;
            height: 7px;
            background: #EE762A;
            border-radius: 50%;
            margin-right:5px;
      }
  }
  .new_demand {
    width: 100%;
    // height:480px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto 20px;
    .new_demand_item {
      padding: 15px;
      .excellent {
        width: 23px;
        height: 26px;
        float: right;
        position: relative;
        top: -16px;
      }
      .title {
        width: 230px;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: #464855;
        // margin-left:5px;
        vertical-align: middle;
      }
      .new_demand_itemMr {
        margin-bottom: 15px;
        .you{
          width: 18px;
          height: 18px;
          background: #FF2F1F;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 19px;
          display: inline-block;
          text-align: center;
          margin-right:4px;
        }
        .tagleft {
          margin-right: 5px;
        }
        .demand_num {
          color: #cf0000;
          font-size: 13px;
          font-weight: 400px;
        }
        .new_demand_img {
          display: flex;
        }
        .iconSvg {
          width: 14px;
          height: 14px;
        }

        p {
          line-height: 23px;
        }
      }
      .docking {
        // border-top:1px solid #eee;
        // border-bottom:1px solid #eee;
        // padding:10px 0;
        .docking_item {
          display: flex;
          align-items: flex-start;
          border-top: 1px solid #eee;
          // border-bottom: 1px solid #eee;
          padding: 15px 0 5px 0;
          // justify-content: space-between;
          p {
            margin-top: 0;
            margin-bottom: 5px;
          }
          .docking_img {
            width: 30px;
            height: 30px;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }
        .docking_info {
          margin-left: 10px;
          .name {
            font-size: 12px;
            font-weight: bold;
            color: #333;
          }
          .desc {
            font-size: 13px;
            font-weight: 400;
            color: #464855;
            line-height: 1.5;
            word-break: break-word;
          }
          .time {
            font-size: 12px;
            font-weight: 400;
            color: #464855;
            opacity: 0.6;
          }
          .file {
            width: 240px;
            height: 62px;
            background: #f6f6f6;
            border-radius: 5px;
            position: relative;
            span {
              font-size: 12px;
              font-weight: 400;
              color: #464855;
              padding-left: 15px;
              position: relative;
              top: 10px;
              display: inline-block;
              width: 168px;
              word-break: break-all;
            }
            .iconfont {
              font-size: 34px;
              position: absolute;
              right: 13px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 315px;
            height: 44px;
            background: #85898C;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}

@media (min-width: 750px) {
  .myneeds {
    padding: 0 15px 80px;
    margin-top: 40px;
}
.square_header {
  .square_header_item {
    margin-right: 29px;
    text-align: center;
    .default {
      font-size: 19px;
      font-weight: bold;
      color: #454757;
    }
  }
}
.content_box {
  margin-top: 30px;
  .tips{
      margin-bottom:10px;
      span{
          display: inline-block;
          width: 7px;
            height: 7px;
            background: #EE762A;
            border-radius: 50%;
            margin-right:5px;
      }
  }
  .new_demand {
    width: 100%;
    // height:480px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto 20px;
    .new_demand_item {
      padding: 15px;
      .excellent {
        width: 23px;
        height: 26px;
        float: right;
        position: relative;
        top: -16px;
      }
      .title {
        width: 230px;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: #464855;
        // margin-left:5px;
        vertical-align: middle;
      }
      .new_demand_itemMr {
        margin-bottom: 15px;
        .you{
          width: 18px;
          height: 18px;
          background: #FF2F1F;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 19px;
          display: inline-block;
          text-align: center;
          margin-right:4px;
        }
        .tagleft {
          margin-right: 5px;
        }
        .demand_num {
          color: #cf0000;
          font-size: 13px;
          font-weight: 400px;
        }
        .new_demand_img {
          display: flex;
        }
        .iconSvg {
          width: 14px;
          height: 14px;
        }

        p {
          line-height: 23px;
        }
      }
      .docking {
        // border-top:1px solid #eee;
        // border-bottom:1px solid #eee;
        // padding:10px 0;
        .docking_item {
          display: flex;
          align-items: flex-start;
          border-top: 1px solid #eee;
          // border-bottom: 1px solid #eee;
          padding: 15px 0 5px 0;
          // justify-content: space-between;
          p {
            margin-top: 0;
            margin-bottom: 5px;
          }
          .docking_img {
            width: 30px;
            height: 30px;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }
        .docking_info {
          margin-left: 10px;
          .name {
            font-size: 12px;
            font-weight: bold;
            color: #333;
          }
          .desc {
            font-size: 13px;
            font-weight: 400;
            color: #464855;
            line-height: 1.5;
            word-break: break-word;
          }
          .time {
            font-size: 12px;
            font-weight: 400;
            color: #464855;
            opacity: 0.6;
          }
          .file {
            width: 240px;
            height: 62px;
            background: #f6f6f6;
            border-radius: 5px;
            position: relative;
            span {
              font-size: 12px;
              font-weight: 400;
              color: #464855;
              padding-left: 15px;
              position: relative;
              top: 10px;
              display: inline-block;
              width: 168px;
              word-break: break-all;
            }
            .iconfont {
              font-size: 34px;
              position: absolute;
              right: 13px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 315px;
            height: 44px;
            background: #85898C;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}
}
</style>
